/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <section class="content">
    <Header :title="`${base.name}-${base.sname}`">
      <div slot="left" @click="goBack" style="width: 100%;height: 100%;text-align: center;">
        <i class="iconfont icon-arrow-left" style="font-size: 22px"></i>
      </div>
    </Header>
    <div class="main">
      <div class="video">
        <img :src="base.litpic" alt="视频封面">
      </div>
      <tab>
        <!-- <tab-item selected @on-item-click="onItemClick">课程介绍</tab-item> -->
        <tab-item selected @on-item-click="onItemClick">课程表</tab-item>
        <tab-item @on-item-click="onItemClick">主讲老师</tab-item>
      </tab>
      <div :class="['tab_content', {'tab_content_buyed': base.hasActived}]">
        <!-- <div class="content_1" v-if="tab_index === 0">
          <img :src="require('../../assets/home/kechengjies.jpg')" alt="课程介绍">
        </div>-->
        <div class="content_2" v-if="tab_index === 0">
          <ul>
            <li
              class="list"
              v-for="(item, index) in items"
              :key="index"
              @click="goKeChengDetail(item)"
            >
              <div class="left">
                <i class="iconfont icon-kecheng"></i>
                {{item.title}}
              </div>
            </li>
          </ul>
        </div>
        <div class="content_3" v-if="tab_index === 1">
          <ul>
            <li v-for="(item,index) in teachers" :key="index">
              <div class="header">
                <img :src="item.portrait" alt="头像">
                {{item.name}}
              </div>
              <p>{{item.description}}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="buy_box" v-if="!base.hasActived">
        <div class="zixun_box">
          <img :src="require('../../assets/home/icon_zixun.png')" alt="咨询客服" @click="goConsultList">咨询客服
        </div>
        <div class="buy" @click="goBuy">
          立即购买
          <b>|</b>
          ¥{{base.price}}
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import Header from "../../components/Header/Header";
import CollapseItem from "../../components/CollapseItem/CollapseItem";
import { Tab, TabItem } from "vux";
import { getTaoChangeDetail, reqOrderCreate } from "../../api/index.js";

export default {
  data() {
    return {
      base: {}, //基本信息
      items: [], //课程
      teachers: [], //教师
      tab_index: 0
    };
  },
  mounted() {
    let cid = this.$router.history.current.query.cid;
    this.getData(cid);
  },
  methods: {
    async getData(data) {
      let result = await getTaoChangeDetail({ packageId: data });
      if (result.code === 1) {
        this.base = result.data.base;
        this.items = result.data.items;
        this.teachers = result.data.teachers;
      } else {
        this.$vux.toast.show(result.msg);
      }
    },
    goBack() {
      this.$router.push({ path: "/taochang" });
    },
    goConsultList() {
      this.$router.push({ path: "/consultList" });
    },
    onItemClick(index) {
      console.log("on item click:", index);
      this.tab_index = index;
    },
    async goBuy() {
      let cid = this.$router.history.current.query.cid;
      console.log("cid", cid);
      //  创建订单
      let result = await reqOrderCreate({ relId: cid, orderType: "P" });
      if (result.code === 1) {
        this.$vux.toast.show(`创建订单成功!`);
        let orderId = result.data.orderId;
        this.$router.push({ path: "/readyPay", query: { orderId: orderId } });
      } else {
        this.$vux.toast.show(`创建订单失败:${result.msg}`);
      }
    },
    goKeChengDetail(data) {
      this.$router.push({ path: "/kechengDetail", query: { id: data.id } });
    }
  },
  components: {
    Header,
    Tab,
    TabItem,
    CollapseItem
  }
};
</script>

<style lang='less' scoped>
@import "../../util/theme.less";

.content {
  .be-full();
  .video {
    width: 100%;
    height: 180px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .main {
    width: 100%;
    height: calc(~"100% - 226px");
    position: relative;
  }
  .tab_content {
    width: 100%;
    height: calc(~"100% - 94px");
    .content_1,
    .content_2,
    .content_3 {
      width: 100%;
      height: 100%;
      overflow: auto;
    }
  }
  .tab_content_buyed {
    height: calc(~"100% - 44px");
  }
}

// 课程介绍
.content_1 {
  img {
    width: 100%;
  }
}

// 购买
.buy_box {
  position: fixed;
  height: 50px;
  width: 100%;
  left: 0;
  bottom: 0;
  background: #fff;
  .mix-flex-center();
  .zixun_box {
    flex: 3;
    .mix-flex-center();
    color: @red;
    img {
      width: 26px;
      height: 26px;
    }
  }
  .buy {
    height: 100%;
    flex: 7;
    .mix-flex-center();
    font-size: 16px;
    color: @white;
    background: @red;
    b {
      padding: 0 6px;
    }
  }
}
// 教师
.content_3 {
  ul {
    li {
      background: #fff;
      padding: 15px;
      border-bottom: 1px solid @border-base;
      .header {
        .mix-flex-center();
        justify-content: flex-start;
        height: 50px;
        img {
          height: 35px;
          width: 35px;
          border-radius: 35px;
          margin-right: 10px;
        }
      }
      p {
        color: @font-secondary;
      }
    }
  }
}

.list {
  .mix-flex-center();
  padding: 10px;
  background: @white;
  border: 1px solid @border-base;
  .left {
    flex: 1;
    .mix-text-overflow();
    i {
      padding: 0 6px;
      color: @font-secondary;
    }
  }
  .right {
    width: 40px;
    text-align: right;
    font-size: 12px;
    color: @red;
  }
}
</style>
